<table class="table table-hover" style="margin-top:5px;min-width:auto">
    <thead>
    <tr style="background-color: #f5f5f5;">
        <th>ID</th>
        <th>IP</th>
        <th>分组</th>
        <th>备注</th>
        <th>机房</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="asset_table">
    {% for i in host_list %}
        <tr name="tbody">
            <td>{{ i.id }}</td>
            <td>{{ i.admin_ip }}</td>
            <td>{{ i.asset_group.group_name }}</td>
            <td>{{ i.asset_msg }}</td>

            <td>{{ i.idc.idc_name }}</td>
            <td>
                {% if i.asset_status == "RUN" %}
                    <a href="javascript:;" style="text-decoration:none; color: #00a65a"
                       data-toggle="tooltip" data-placement="top" title="可连接"><span
                            class="fa fa-lg fa-power-off"></span> </a>
                {% elif i.asset_status == "RECYCLE" %}
                    <a><span class="label label-warning">已回收</span></a>
                {% else %}
                    <a href="javascript:;" name="add-connect" asset_id="{{ i.id }}"
                       style="text-decoration:none;color: #7a869d" data-toggle="tooltip"
                       data-placement="top" title="未同步"><span class="fa fa-lg fa-power-off"></span> </a>
                {% endif %}
            </td>
            <td style="padding-left:5px;">
                <a href="javascript:;" name="edit-asset" asset_id="{{ i.id }}" style="text-decoration:none;"
                   data-toggle="tooltip" data-placement="top" title="修改"><span class="fa fa-pencil"></span></a>&nbsp;&nbsp;&nbsp;
                <a href="/cmdb/assetdetail/{{ i.id }}/" name="info-asset" style="text-decoration:none;"
                   data-toggle="tooltip" data-placement="top" title="详情信息"><span
                        class="fa fa-info-circle"></span> </a>&nbsp;&nbsp;&nbsp;
                <a href="javascript:;" name="del-asset" asset_id="{{ i.id }}" style="text-decoration:none;"
                   data-toggle="tooltip" data-placement="top" title="删除"><span
                        class="fa fa-trash"></span></a>&nbsp;&nbsp;

                <a href="javascript:;" name="recycling" asset_id="{{ i.id }}"
                   style="text-decoration:none;" data-toggle="tooltip" data-placement="top"
                   title="回收"><span class="fa fa-recycle"></span></a>&nbsp;&nbsp;

                <a href="/ws/{{ i.id }}/" target="_blank" name="zbx-asset" asset_id="{{ i.id }}"
                   style="text-decoration:none;" data-toggle="tooltip" data-placement="top"
                   title="webssh"><span class="fa fa-desktop"></span></a>&nbsp;&nbsp;

            </td>
        </tr>
    {% endfor %}
    </tbody>

</table>
<div class="text-right" style="margin-top:-30px;padding-right:9%">
    <ul class="pagination" id="pagination"></ul>
</div>
<script type="text/javascript" src="/static/mystyle/js/asset.js"></script>
<script>

    //前端分页
    var limit = 15; //每页显示数据条数
    var total = $('#asset_table').find('tr').length;
    var allPage = total % limit > 0 ? parseInt(total / limit) + 1 : parseInt(total / limit);

    function doPage(n) {
        if (allPage > 1) {
            var prevPage = '', nextPage = '', pageHtml = '';

            if (n === 1) {
                prevPage = '<li class="disabled"><a href="javascript:;">上一页</a></li>';
                nextPage = '<li data-page="' + (n + 1) + '"><a href="javascript:;">下一页</a></li>';
            } else if (n === allPage) {
                prevPage = '<li data-page="' + (n - 1) + '"><a href="javascript:;">上一页</a></li>';
                nextPage = '<li class="disabled"><a href="javascript:;">下一页</a></li>';
            } else {
                prevPage = '<li data-page="' + (n - 1) + '"><a href="javascript:;">上一页</a></li>';
                nextPage = '<li data-page="' + (n + 1) + '"><a href="javascript:;">下一页</a></li>';
            }

            if (n <= 5) {
                for (var i = 1; i <= 5; i++) {
                    if (n === i) {
                        pageHtml += '<li class="active"><a href="javascript:;">' + i + '</a></li>';
                    } else {
                        if (i <= allPage) {
                            pageHtml += '<li data-page="' + i + '"><a href="javascript:;">' + i + '</a></li>';
                        }
                    }

                }
            } else {
                for (var i = 1; i <= 5; i++) {

                    cur_page = parseInt(parseInt((n - 1) / 5) * 5);

                    if (n === (cur_page + i)) {
                        pageHtml += '<li class="active"><a href="javascript:;">' + (cur_page + i) + '</a></li>';
                    } else {
                        if ((i + cur_page) <= allPage) {
                            pageHtml += '<li data-page="' + (i + cur_page) + '"><a href="javascript:;">' + (i + cur_page) + '</a></li>';
                        }
                    }
                }
            }
            $('#pagination').html(prevPage + pageHtml + nextPage);
        }

        $('#asset_table').find('tr[name="tbody"]').hide();
        if (n === 1) {
            $('#asset_table').find('tr[name="tbody"]:lt(' + limit + ')').show();
        } else {
            $('#asset_table').find('tr[name="tbody"]:gt(' + ((n - 1) * limit - 1) + '):lt(' + limit + ')').show();
        }

    }

    doPage(1);

    $('#pagination').on('click', 'li a', function (event) {
        event.preventDefault();
        var curr = parseInt($(this).parent().data('page'));

        if (!isNaN(curr)) {
            doPage(curr);
        }
    });

    $(function () {
        //全选,设置chheckbox name='all' tbody id=tb
        $("#ckb_head").click(function () {
            if (this.checked) {
                $("input[name='ckb']").prop("checked", true);
            } else {
                $("input[name='ckb']").prop("checked", false);
            }
        });
    });


    //获取编辑资产信息
    $('td a[name="edit-asset"]').click(function () {
        var asset_id = $(this).attr("asset_id");
        $.ajax({
            url: "/cmdb/asset/",
            type: "PUT",
            data: JSON.stringify({'asset_id': asset_id}),
            success: function (data) {
                var ret = eval('(' + data + ')');
                if (ret.status == "False") {
                    spop({
                        template: ret.info,
                        style: 'warning',
                        autoclose: 5000
                    });
                } else {
                    if (ret.status == "True") {
                        info = ret.info;
                        $("#edit-admin-ip").val(info.admin_ip);
                        $("#edit-login-port").val(info.login_port);
                        $("#edit-login-user").val(info.login_user);
                        $("#edit-login-passwd").val(info.login_passwd);
                        $("#edit-login-id-rsa").val(info.login_id_rsa);
                        $("#edit-connect-method").val(info.connect_method);
                        $("#edit-buy-time").val(info.buy_time);
                        $("#edit-use-cycle").val(info.use_cycle);
                        $("#edit-asset-group").val(info.asset_group);
                        $("#edit-asset-idc").val(info.asset_idc);
                        $("#edit-asset-msg").val(info.asset_msg);
                        $("#sub-edit-asset").attr('asset_id', info.asset_id);
                        $("#edit-assetModal").modal('show');
                    } else {
                        spop({
                            template: ret.info,
                            autoclose: 2000
                        });
                    }
                }
            }
        });
    });


    //删除资产
    $("td a[name='del-asset']").click(function () {
        var asset_id = $(this).attr('asset_id');
        var statu = confirm("是否确认删除！");
        if (statu == true) {
            $.ajax({
                url: "/cmdb/asset/",
                type: "DELETE",
                data: JSON.stringify({'asset_id': asset_id}),
                success: function (data) {
                    var ret = eval('(' + data + ')');
                    if (ret.status == "False") {
                        spop({
                            template: ret.info,
                            style: 'warning',
                            autoclose: 5000
                        });
                    } else {
                        spop({
                            template: ret.info,
                            style: 'success',
                            autoclose: 2000
                        });
                        setTimeout("location.reload()", 2000);
                    }
                }
            });
        }
    });


    //配置连接密钥
    $("td a[name='add-connect']").click(function () {
        var asset_id = $(this).attr('asset_id');
        console.log(asset_id);
        $.ajax({
            url: "/cmdb/setconf/",
            type: "POST",
            data: {'asset_id': asset_id},
            success: function (data) {
                var ret = eval('(' + data + ')');
                if (ret.status == "False") {
                    spop({
                        template: ret.info,
                        style: 'warning',
                        autoclose: 5000
                    });
                } else {
                    spop({
                        template: ret.info,
                        style: 'success',
                        autoclose: 2000
                    });
                    setTimeout("location.reload()", 2000);
                }
            }
        });
    });


    $("td a[name='add-zabbix']").click(function () {
        var host_id = $(this).attr("asset_id");
        $.post("/cmdb/zabbix/", {"host_id": host_id, "action": "get"}, function (data) {
            var ret = eval('(' + data + ')');
            $("#zbx-host-name").val(ret.host_ip);
            $("#zbx-vs-name").val(ret.admin_ip + "_" + ret.group + "_" + ret.host_msg);
            console.log(ret.group_tag_list);
            $("#zbx-group").select2({
                multiple: true,
                data: ret.host_group,
            });
            $("#zbx-group").val(ret.group_tag_list).trigger('change');
            $("#zbx-template").select2({
                multiple: true,
                data: ret.template_list
            });
            $("#zbx-template").val(ret.tmp_tag_list).trigger('change');
            $("#zbx-ag-interface").val(ret.admin_ip);
            $("#sub-zabbix").attr("host_id", host_id);
        });
        $("#zabbixModal").modal("show");
    });

    $("#sub-zabbix").click(function () {
        var host_id = $(this).attr("host_id");
        var host_name = $("#zbx-host-name").val();
        var vs_name = $("#zbx-vs-name").val();
        var zbx_group = $("#zbx-group").select2("val");
        var zbx_template = $("#zbx-template").select2("val");
        var zbx_interface = $("#zbx-ag-interface").val();
        var zbx_port = $("#zbx-port").val();

        $.post("/cmdb/zabbix/", {
                "host_id": host_id,
                "host_name": host_name,
                "vs_name": vs_name,
                "action": "add",
                "zbx_group": JSON.stringify(zbx_group),
                "zbx_template": JSON.stringify(zbx_template),
                "zbx_interface": zbx_interface,
                "zbx_port": zbx_port
            },
            function (data) {
                var ret = eval('(' + data + ')');
                if (ret.status == "False") {
                    spop({
                        template: ret.info,
                        style: 'warning',
                        autoclose: 5000
                    });
                } else {
                    $("#zabbixModal").modal("hide");
                    spop({
                        template: ret.info,
                        style: 'success',
                        autoclose: 2000
                    });
                    setTimeout("location.reload()", 2000);
                }
            })
    });


    //配置连接密钥
    $("td a[name='recycling']").click(function () {
        var asset_id = $(this).attr('asset_id');
        $.ajax({
            url: "/cmdb/recycling/",
            type: "POST",
            data: {'asset_id': asset_id},
            success: function (data) {
                var ret = eval('(' + data + ')');
                if (ret.status == "False") {
                    spop({
                        template: ret.info,
                        style: 'warning',
                        autoclose: 5000
                    });
                } else {
                    spop({
                        template: ret.info,
                        style: 'success',
                        autoclose: 2000
                    });
                    setTimeout("location.reload()", 2000);
                }
            }
        });
    });




</script>